<template>
    <!-- 收货地址 -->
    <van-contact-card type="edit" :name="`${address.consignee} ${address.region_text}`" :tel="address.mobile" @click="AddressShow = true" />

    <!-- 物流公司 -->
    <van-field
        label="物流公司"
        v-model="order.name"
        readonly
    />

    <van-field
        label="物流单号"
        v-model="order.code"
        readonly
    />

    <van-field
        label="状态"
        v-model="order.status"
        readonly
    />

    <!-- 物流进度 -->
    <van-steps v-if="express.length > 0" direction="vertical" :active="0">
        <van-step v-for="item in express" :key="item.time">
            <h3>{{item.status}}</h3>
            <p>{{item.time}}</p>
        </van-step>
    </van-steps>

    <!-- 弹出层 -->
    <van-popup v-model:show="AddressShow" position="bottom" round style="height: 40%; padding-top: 4px;">
        <van-form>
            <van-field v-model="address.consignee" label="收件人" readonly />
            <van-field v-model="address.mobile" label="手机号码" readonly />
            <van-field v-model="address.region_text" label="所在地区" readonly />
            <van-field v-model="address.address" label="详细地址" readonly />
            <van-field v-model="address.status_text" label="是否默认地址" readonly />
            <div style="width:50%;margin:2em auto 0em;">
                <van-button round block type="primary" @click="AddressShow = false">关闭</van-button>
            </div>
        </van-form>
    </van-popup>
</template>

<script setup>
    const { proxy } = getCurrentInstance()

    let orderid = proxy.$route.query.orderid ?? 0
    let order = ref({name: '', code: '', status: ''})
    let address = ref({})
    let AddressShow = ref(false)
    let express = ref([])

    onBeforeMount(() => ExpressInfo())

    const ExpressInfo = async () =>
    {
        var result = await proxy.$POST({url: '/order/express', params: {orderid}})

        if(result.code == 0)
        {
            proxy.$fail({
                message: result.msg,
                onClose: () => proxy.$router.back()
            })
            return false
        }

        address.value = result.data.address
        order.value = result.data.order
        express.value = result.data.express

    }


</script>